<!DOCTYPE html>
<html lang="en">
<head>
    <title>CAR主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">
        #manage, #add {
            float: left;
        }
    </style>
</head>
<body>
<hr>

<div id="carapp" class="container">
    <h2 id="manage">汽车管理</h2>
    <div id="add" style="padding-left: 50px;padding-top: 20px">
        <button class="btn btn-default" type="button" @click="addModal()">新增</button>
    </div>
    <br>
    <table class="table">
        <tr class="row">
            <th>汽车编号</th>
            <th>名字</th>
            <th>类型</th>
            <th>座位数</th>
            <th>城市编号</th>
            <th>价格</th>
            <th>数量</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        <tr v-for="car in cars" class="row">
            <th>{{car.id}}</th>
            <th>{{car.name}}</th>
            <th>{{car.type}}</th>
            <th>{{car.sitnum}}</th>
            <th>{{car.cid}}</th>
            <th>{{car.price}}</th>
            <th>{{car.number}}</th>
            <th><img style="width: 188px;height: 125px" v-bind:src="car.picture"></th>
            <th>
                <button class="btn btn-default" type="button" @click="updateModal(car.id)">修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-default" type="button" @click="deleteCar(car.id)">删除</button>
            </th>
        </tr>
    </table>
    <div style="text-align: center">
        <ul class="pagination">
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(page-1)">上页</span>
            </li>


            <li class="page-item ">
                <span class="page-link">第{{page}}页</span>
            </li>


            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(page+1)">下页</span>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModallable">ADDCAR</h4>
                </div>
                <form @submit.prevent="addCar()">
                    <div class="modal-body">
                        <input type="hidden" name="id" v-model="addcar.id">
                        <div class="form-group">
                            <label class="control-label">NAME:</label>
                            <input type="text" class="form-control" name="name" v-model="addcar.name">
                        </div>
                        <div class="form-group">
                            <label class="control-label">TYPE:</label>
                            <input type="text" class="form-control" name="type" v-model="addcar.type">
                        </div>
                        <div class="form-group">
                            <label class="control-label">SITNUM:</label>
                            <input type="text" class="form-control" name="sitnum" v-model="addcar.sitnum">
                        </div>
                        <div class="form-group">
                            <label class="control-label">CID:</label>
                            <input type="text" class="form-control" name="cid" v-model="addcar.cid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PRICE:</label>
                            <input type="text" class="form-control" name="price" v-model="addcar.price">
                        </div>
                        <div class="form-group">
                            <label class="control-label">NUMBER:</label>
                            <input type="text" class="form-control" name="number" v-model="addcar.number">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PICTURE:</label>
                            <input type="text" class="form-control" name="picture" v-model="addcar.picture">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">UPDATECAR </h4>
                </div>
                <form @submit.prevent="updateCar()">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" readonly="readonly" name="id" v-model="upcar.id">
                        </div>
                        <div class="form-group">
                            <label class="control-label">NAME:</label>
                            <input type="text" class="form-control" name="name" v-model="upcar.name">
                        </div>
                        <div class="form-group">
                            <label class="control-label">TYPE:</label>
                            <input type="text" class="form-control" name="type" v-model="upcar.type">
                        </div>
                        <div class="form-group">
                            <label class="control-label">SITNUM:</label>
                            <input type="text" class="form-control" name="sitnum" v-model="upcar.sitnum">
                        </div>
                        <div class="form-group">
                            <label class="control-label">CID:</label>
                            <input type="text" class="form-control" name="cid" v-model="upcar.cid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PRICE:</label>
                            <input type="text" class="form-control" name="price" v-model="upcar.price">
                        </div>
                        <div class="form-group">
                            <label class="control-label">NUMBER:</label>
                            <input type="text" class="form-control" name="number" v-model="upcar.number">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PICTURE:</label>
                            <input type="text" class="form-control" name="picture" v-model="upcar.picture">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
    var div1 = new Vue({
            el: '#carapp',
            data: {
                page: 1,
                pages: 1,
                cars: [],
                addcar: {id: 0, name: '', type: '', sitnum: 0, cid: 0, price: 0.0, number: 0, picture: ''},
                upcar: {id: 0, name: '', type: '', sitnum: 0, cid: 0, price: 0.0, number: 0, picture: ''}
            },
            methods: {
                addModal: function () {
                    $("#addModal").modal('show');
                },
                updateModal: function (id) {
                    for (let x of this.cars) {
                        if (x.id == id) {
                            this.upcar.id = x.id;
                            this.upcar.name = x.name;
                            this.upcar.type = x.type;
                            this.upcar.sitnum = x.sitnum;
                            this.upcar.cid = x.cid;
                            this.upcar.price = x.price;
                            this.upcar.number = x.number;
                            this.upcar.picture = x.picture;

                        }
                    }
                    $("#updateModal").modal('show');
                },
                updateCar: function () {
                    $.ajax({
                        url: '/car',
                        type: 'PUT',
                        data: JSON.stringify(div1.upcar),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res == 1) {
                                location.reload();
                            }
                            $("#updateModal").modal('hide');
                        }
                    })
                },
                addCar: function () {
                    $.ajax({
                        url: '/car',
                        type: 'POST',
                        data: JSON.stringify(div1.addcar),
                        contentType: 'application/json',
                        success: function (data) {
                            div1.cars.push(data);
                            $("#addModal").modal('hide');
                        }
                    })
                },
                deleteCar: function (id) {
                    $.ajax({
                        url: '/car' + id,
                        type: 'DELETE',
                        success: function (data) {
                            alert(data);
                            if (data == 1) {
                                for (let x of div1.cars) {
                                    if (x.id == id) {
                                        div1.cars.splice(div1.cars.indexOf(x), 1);
                                    }
                                }
                            }
                        }
                    })
                }
            }
        }
    );
    $(function () {
        changePage(1);
    });

    function changePage(page) {
        if (page < 1 || page > div1.pages) {
            return;
        }
        $.ajax({
            url: '/carlist?page=' + page,
            type: 'GET',
            success: function (data) {
                div1.cars = data.list;
                div1.page = data.pageNum;
                div1.pages = data.pages;
            }
        })
    }
</script>
</body>
</html>
